<template>

	<!-- 申请人首页 -->
	<div >
		<div class="container-fluid" id="nav_pic">
		        <a class="btn btn-default" href="#" role="button">了解更多</a>
				<router-link to="/evaluation" class="btn btn-default" href="#" role="button">进行申报</router-link>
		
		    </div>
		    <div class="container" id="process">
		        <div class="process_nav">
		            <div>
		                <span>材料填报过程</span>
		            </div>
		            <div>
						<router-link to="/evaluation"> 我要申报<img class="right" src="/img/right.png" alt=""></router-link>
		              
		            </div>
		        </div>
		        <div class="process_pic">
		            <div v-for="path in processImgs">
						<img :src="path" >
					</div>

		        </div>
		    </div>
		    <div id="activity" class="container-fluid" style="padding-right: 30px;padding-left: 30px;">
		        <div>
					<img src="/img/3-0-10.png" >

				</div>
		        <div class="activity_right">
		            <div class="activity_nav">
		                <div>
		                    <span>职称评审活动</span>
		                </div>
		                <div>
							
							<router-link  to="/activity/more" style="color: #000;font-size: 16px;">查看更多<img class="right" src="/img/right.png"
		                            alt=""></router-link>
		                  
		                </div>
		            </div>
		            <table class="tables">
                       
		                <tr v-for="item in newEventsList">
		                    <td ><router-link class="text_hidden" :to="'/activity/details?id='+item.id">{{item.title}}</router-link></td>
		                    <td>{{item.wssbkssj}}至{{item.wssbjssj}}</td>
		                    <td style="text-align: center;">
		                        <button class="statue_on" :class="item.status==1?'underway':'not_started'">{{item.status==1?'进行中':(item.status==0?'未开始':'已结束')}}</button>
		                    </td>
		                </tr>
		               
		                
		            </table>
		        </div>
		    </div>
		    <div id="inform" class="container-fluid">
		        <div id="inform_nav" class="container">
		            <div class="inform_nav">
		                <div>
		                    <span>通知公告</span>
		                </div>
		                <div>
							<router-link to="/notice" style="color: #000;font-size: 16px;">查看更多<img class="right" src="/img/right.png"
		                            alt=""></router-link>
		                </div>
		            </div>

					<div id="" style="width: 80%; margin: 0 auto;">
						 <el-carousel :interval="4000" type="card" height="640px">
						    <el-carousel-item v-for="(item,index) in noticeList" :key="index" style="width: 618px;padding: 0;">
						      <el-card :body-style="{ padding: '0px' ,backgroundColor: 'rgb(253 253 253 / 0%)'}">
								  <div id="" style="height: 360px;overflow: hidden;">
								  	  <img :src="item.fggtp" height="100%"/>
								  </div>

								  <div id="" style="background-color: #fff;height: 275px;">
								  	<div style="text-align: center; padding: 10px 0;">
								  		<span>重要公告</span>
										<router-link :to="'/notice/details?id='+item.id">
											<h3 class="text_hidden">{{item.title}}</h3>
										</router-link>
								  		
								  	</div>

									<div id="" style="padding: 0px 20px;" class="text_hidden_rows">
											{{item.absrtact}}
									</div>

									<div id="" style="text-align: center;padding: 20px 0;">
										<span>{{item.createTime}}</span>
									</div>




								  </div>



							  </el-card>
						    </el-carousel-item>
						  </el-carousel>
					</div>

		        </div>
		    </div>
		   
			
			<div id="end" class="container-fluid">
		        <div class="container" style="width: 1170px;border-bottom: 2px solid #656565;">
		            <div id="end_top" class="container">
		                <div>
		                    <h3>applan</h3>
		                </div>
		                <div>
		                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
		                    incididunt ut labore et dolore magna aliqua
		                </div>
		                <div>
		                    <div><a href="#">1</a></div>
		                    <div><a href="#">1</a></div>
		                    <div><a href="#">1</a></div>
		                    <div><a href="#">1</a></div>
		                    <div><a href="#">1</a></div>
		                    <div><a href="#">1</a></div>
		                </div>
		            </div>
		        </div>

		        <div id="end_bottom" class="container">
		            Copyright @ applan 2018.All Rights Reserved.
		        </div>
		    </div>


	</div>

</template>

<script>
	export default {
		name:'shenqingren',
		created() {
			this.queryEventsList()
			this.queryMainNotice();
		},
		methods:{
			//查询活动列表
			queryEventsList(){
				let that=this
				that.$http.get("/events/eventstopslt").then(res=>{
					that.newEventsList=res.data.list
				})
				
			},
			
			//查询重要公告
			queryMainNotice(){
				let that=this
				that.$http.get("/announcement/query?isEmphasis=1&isNew=true").then(res=>{
					that.noticeList=res.data.list
				})
				
			},
			//查询下载文件信息
			queryFileListInfo(){
				
			}
			
		},
		data(){
			return{
				noticeList:[],
				newEventsList:[], //最新活动列表
				//材料申报步骤图片
				processImgs:[
					'/img/3-0-3.png',
					'/img/3-0-4.png',
					'/img/3-0-5.png',
					'/img/3-0-6.png',
					'/img/3-0-7.png',
					'/img/3-0-8.png'
				]
			}
		}
	}
</script>

<style scoped>
	.activity_right{
		background:url(../../public/img/3-0-11.png) no-repeat;
		background-position: 380px 20px;
	}


	#nav_pic {
	    background: url(../../public/img/3-0-1-03.png) no-repeat;
		background-size: 100% 100%;
	    height: 680px;
	    box-shadow: 2px 2px 20px rgb(228, 230, 251);
	}

	.btn.btn-default {
	    height: 50px;
	    width: 150px;
	    border-radius: 0px;
	    margin-top: 175px;
	    line-height: 40px;
	    box-shadow: 0px 5 px 5px rgb(206, 208, 229);

	}

	.btn.btn-default:nth-child(1) {
	    border: 2px solid rgba(171, 171, 237);
	    color: rgba(171, 171, 237);
	    margin-left: 230px;
	}

	.btn.btn-default:nth-child(2) {
	    color: #fff;
	    margin-left: 15px;
	    background-image: linear-gradient(to bottom right, rgba(73, 181, 254), rgba(37, 37, 209));
	}

	#process {
	    display: flex;
	    flex-direction: column;
	    width: 1400px;
	    height: 356px;
	    margin-top: 45px;
	}

	.process_nav {
	    flex: 1;
	    display: flex;
	    flex-direction: row;
	}

	.process_nav>div {
	    height: 70%;
	}

	.process_pic {
	    flex: 5;
	    display: flex;

	}

	.process_pic>div {
	    flex: 1;
	    height: 302px;
	    border: 1px solid #00000038;;
	}

	.process_pic>div:not(:first-child) {
	    margin-left: 40px;
	}

	.process_nav>div:nth-child(1) {
	    border-left: 4px solid rgb(50, 72, 220);
	    margin-left: 0px;
	    flex: 5;

	}

	.process_nav>div:nth-child(1) span {
	    font-size: 30px;
	    font-weight: 600;
	    margin-left: 17px;
	}

	.process_nav>div:nth-child(2) {
	    flex: 0.5;

	}

	.process_nav>div:nth-child(2) a {
	    text-decoration: none;
	    color: rgb(106, 106, 106);
	    font-size: 18px;

	}

	.right {
	    width: 15px;
	    margin-left: 10px;
	}

	#activity {
	    height: 760px;
	    margin-top: 112px;
	    display: flex;
	}

	#activity>div:nth-child(1) {
	    flex: 0.75;

	}

	#activity>div:nth-child(2) {
	    flex: 1;

	}

	.activity_nav {
	    flex: 1;
	    display: flex;

	}

	.activity_nav>div:nth-child(1) {
	    border-left: 4px solid rgb(50, 72, 220);
	    margin-left: 0px;
	    flex: 3;

	}

	.activity_nav>div:nth-child(1) span {
	    font-size: 30px;
	    font-weight: 600;
	    margin-left: 17px;
	}

	.activity_nav>div:nth-child(2) {
	    flex: 1.4;

	}

	.activity_nav>div:nth-child(2) a {
	    text-decoration: none;
	    color: rgb(106, 106, 106);
	    font-size: 18px;
	}

	.tables {
	    margin-left: 15px;
	    margin-top: 25px;
	  
	}

	.tables tr>td:nth-child(1) {
	    width: 350px;
		display: inline-block;
		padding-right: 50px;
		
	}

	.tables tr>td:nth-child(2) {
	    width: 300px;
		font-size: 16px;
		text-align: center;
	}

	.tables_head {
	    font-size: 20px;
	    color: rgb(37, 37, 209);
	    margin-left: 17px;
	    margin-top: 45px;

	}

	.tables tr:first-child {}

	.tables tr {
	    height: 25px;
	}

	.tables a {
	    color: #000;
	    margin-left: -5px;

	}

	.tables tr td:nth-child(1)>a {
	    font-size: 16px;
	}

	.tables tr td:nth-child(2)>a {
	    font-size: 14 px;
	    color: #666666;
	}

     .underway{
		 background-color: #19cc00;
		 color: #fff;
	 }

     .not_started{
		 background-color: #0a0a0a4f;
	 }
	 
	.statue_on {
	    border-radius: 30px;
	    width: 61px;
	    height: 21px;
	    font-size: 13px;
	    border-style: none;
		line-height: 21px;
	    

	}

	

	#inform {
	    height: 820px;
	   /* box-shadow: 5px 5px 10px rgb(206, 208, 229); */
	    /* background-image: linear-gradient(to bottom right, #DBF0FF, #D3D3F6); */
		background: url(../../public/img/3-0-22.png) no-repeat;
		background-size: cover;
	}

	#inform_nav {
	    width: 1400px;
	    height: 30px;
	    margin-top: 52px;
	}

	.inform_nav {
	    display: flex;
	    border-left: 5px solid rgb(50, 72, 220);

	}

	.inform_nav>div:nth-child(1) {
	    flex: 11;
	}

	.inform_nav>div:nth-child(2) {
	    flex: 1;
	    margin-top: 5px;
	}

	.inform_nav>div>span {
	    font-size: 28px;
	    font-weight: 600;
	    margin-left: 10px;
	}

	#download {
	    margin-top: 85px;
	    padding: 0;
	    height: 890px;

	}

	.download_center {
	    background: url(../../public/img/3-0-20.png) no-repeat;
		background-size: 100% 100%;
	    width: 100%;
	    height: 620px;

	}

	#download_table {
	    width: 1320px;
	    height: 410px;
	    padding: 0;
	}

	#download_table>div:nth-child(1) {
	    display: flex;
	    height: 26px;
	}

	#download_table>div:nth-child(1)>div:nth-child(1) {
	    flex: 11;
	    border-left: 4px solid rgb(50, 72, 220);

	}

	#download_table>div:nth-child(1)>div:nth-child(1)>span {
	    font-size: 22px;
	    font-weight: 600;
	    margin-left: 15px;
	}

	#download_table>div:nth-child(1)>div:nth-child(2) {
	    flex: 1;
	}

	#download_table>div:nth-child(2) {
	    display: flex;
	    height: 460px;

	}

	#download_table>div:nth-child(2)>div:nth-child(1) {
	    flex: 0.9;

	}

	#download_table>div:nth-child(2)>div:nth-child(2) {
	    flex: 1;

	}

	.download_tables {
	    margin-top: 62px;

	    width: 640px;
	}

	.download_tables tr {
	    line-height: 40px;
	}

	.download_tables tr>td:nth-child(1) {
	    font-size: 16px;
	    width: 240px;

	}

	.download_tables tr>td:nth-child(2) {
	    font-size: 14px;
	    width: 340px;
	    color: #B6B6B7;
	}

	.download_pic {
	    display: flex;


	}

	.download_pic>div {
	    flex: 1;
	    margin-left: 30px;
	}

	.downlod_true span {
	    font-size: 18px;
	    color: #2525D1;
	}

	.downlod_false span {
	    font-size: 18px;
	    color: #CACACA;
	}

	#end {
	    height: 460px;
	    background: url(../../public/img/3-0-23.png) no-repeat;
		background-size: cover;
	}

	#end_top {
	    width: 520px;
	    height: 250px;

	    margin-top: 85px;
	    display: flex;
	    flex-direction: column;
	    padding: 0;
	}

	#end_top div:nth-child(1) {

	    flex: 1.0;
	}

	#end_top div:nth-child(2) {

	    flex: 1.0;
	}

	#end_top div:nth-child(3) {

	    flex: 2;
	}

	#end_top>div:nth-child(1)>h3 {
	    font-weight: 800;
	    color: #fff;
	    text-align: center;
	    font-size: 12;
	}

	#end_top>div:nth-child(2) {
	    color: #fff;
	    text-align: center;
	    font-size: 12;
	}

	#end_top>div:nth-child(3) {
	    display: flex;
	    width: 200px;
	    margin-left: 165px;
	}

	#end_top>div:nth-child(3)>div {
	    flex: 1;

	    text-align: center;
	    line-height: 76px;
	}

	#end_bottom {
	    width: 300px;
	    height: 20px;
	    margin-top: 50px;
	    color: #fff;
	    padding: 0;
	}
</style>
